<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结班报告填写系统</title>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei", sans-serif;
        }
        body {
            background-color: #f5f7fa;
            padding: 20px;
            color: #333;
            line-height: 1.6;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            padding: 25px;
        }
        header {
            text-align: center;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eaeaea;
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 28px;
        }
        .subtitle {
            color: #7f8c8d;
            font-size: 16px;
        }
        .controls {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
        }
        .group-selector {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 18px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        button:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        button i {
            font-style: normal;
            font-size: 16px;
        }
        .date-selector {
            display: flex;
            align-items: center;
            gap: 10px;
            background: white;
            padding: 8px 12px;
            border-radius: 6px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        input[type="date"] {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        .data-sharing {
            display: flex;
            gap: 10px;
        }
        .export-btn {
            background-color: #27ae60;
        }
        .export-btn:hover {
            background-color: #219653;
        }
        .import-btn {
            background-color: #e67e22;
        }
        .import-btn:hover {
            background-color: #d35400;
        }
        .report-form {
            margin-bottom: 30px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        th, td {
            border: 1px solid #e0e0e0;
            padding: 12px 15px;
            text-align: left;
        }
        th {
            background-color: #f2f6fc;
            font-weight: bold;
            color: #2c3e50;
        }
        input[type="text"], textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border 0.3s;
        }
        input[type="text"]:focus, textarea:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        textarea {
            min-height: 70px;
            resize: vertical;
        }
        .actions {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 25px;
        }
        .save-btn {
            background-color: #2ecc71;
        }
        .save-btn:hover {
            background-color: #27ae60;
        }
        .screenshot-btn {
            background-color: #9b59b6;
        }
        .screenshot-btn:hover {
            background-color: #8e44ad;
        }
        .history-section {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #eaeaea;
        }
        .history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        h2 {
            color: #2c3e50;
            font-size: 22px;
        }
        .history-table {
            max-height: 500px;
            overflow-y: auto;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
        }
        .hidden {
            display: none;
        }
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 25px;
            background-color: #2ecc71;
            color: white;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s;
            font-weight: 500;
        }
        .notification.show {
            opacity: 1;
        }
        .notification.error {
            background-color: #e74c3c;
        }
        .group-tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
            background: #f8f9fa;
            border-radius: 8px 8px 0 0;
            overflow: hidden;
        }
        .group-tab {
            padding: 12px 25px;
            cursor: pointer;
            border: none;
            background: transparent;
            color: #7f8c8d;
            font-weight: 500;
            transition: all 0.3s;
            flex: 1;
            text-align: center;
        }
        .group-tab.active {
            background-color: #3498db;
            color: white;
        }
        .report-content {
            border: 1px solid #e0e0e0;
            border-top: none;
            padding: 25px;
            border-radius: 0 0 8px 8px;
            background: white;
        }
        .data-info {
            text-align: center;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
            margin-bottom: 15px;
            font-size: 14px;
            color: #7f8c8d;
        }
        .file-input {
            display: none;
        }
        .screenshot-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            flex-direction: column;
            gap: 20px;
        }
        .screenshot-preview {
            max-width: 90%;
            max-height: 80%;
            border: 2px solid white;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }
        .screenshot-actions {
            display: flex;
            gap: 15px;
        }
        .screenshot-download {
            background-color: #27ae60;
        }
        .screenshot-close {
            background-color: #e74c3c;
        }
        @media (max-width: 768px) {
            .controls {
                flex-direction: column;
            }
            .group-tabs {
                flex-direction: column;
            }
            .group-tab {
                padding: 10px;
            }
            th, td {
                padding: 8px 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container" id="main-container">
        <header>
            <h1>结班报告填写系统</h1>
            <p class="subtitle">支持BTK、小店铺、PR时装、PR毛衣四个组别的结班报告填写与数据共享</p>
        </header>
        
        <div class="controls">
            <div class="group-selector">
                <button id="today-btn"><i>📅</i> 今日数据</button>
                <div class="date-selector">
                    <label for="date-picker">选择日期：</label>
                    <input type="date" id="date-picker">
                </div>
            </div>
            <div class="data-sharing">
                <button id="export-excel-btn" class="export-btn"><i>📊</i> 导出Excel</button>
                <button id="import-excel-btn" class="import-btn"><i>📥</i> 导入Excel</button>
                <input type="file" id="excel-file-input" class="file-input" accept=".xlsx,.xls">
                <button id="view-history-btn"><i>📈</i> 查看历史</button>
            </div>
        </div>
        
        <div class="group-tabs">
            <div class="group-tab active" data-group="btk">BTK</div>
            <div class="group-tab" data-group="small-shop">小店铺</div>
            <div class="group-tab" data-group="pr-fashion">PR时装</div>
            <div class="group-tab" data-group="pr-sweater">PR毛衣</div>
        </div>
        
        <div class="data-info" id="data-info">
            当前数据来源：本地存储 | 数据条目：0 | 最后更新：<span id="last-update">-</span>
        </div>
        
        <div class="report-content">
            <div class="report-form">
                <table>
                    <thead>
                        <tr>
                            <th style="width: 15%">模块</th>
                            <th style="width: 15%">类别</th>
                            <th style="width: 50%">内容</th>
                            <th style="width: 20%">异常备注</th>
                        </tr>
                    </thead>
                    <tbody id="report-table-body">
                        <!-- 业务数据 -->
                        <tr>
                            <td rowspan="3">业务数据</td>
                            <td>入库</td>
                            <td><input type="text" id="inbound-data" placeholder="例如：拆货入库13532件"></td>
                            <td><textarea id="inbound-remark" placeholder="异常备注"></textarea></td>
                        </tr>
                        <tr>
                            <td>出库</td>
                            <td><input type="text" id="outbound-data" placeholder="例如：FBA出货13532件"></td>
                            <td><textarea id="outbound-remark" placeholder="异常备注"></textarea></td>
                        </tr>
                        <tr>
                            <td>库存操作</td>
                            <td><input type="text" id="inventory-data" placeholder="例如：移货1350件/盘点1350件"></td>
                            <td><textarea id="inventory-remark" placeholder="异常备注"></textarea></td>
                        </tr>
                        
                        <!-- 完成情况 -->
                        <tr>
                            <td rowspan="3">完成情况</td>
                            <td>入库</td>
                            <td><input type="text" id="inbound-completion" placeholder="例如：当天剩余待入库：2300"></td>
                            <td><textarea id="inbound-completion-remark" placeholder="异常备注"></textarea></td>
                        </tr>
                        <tr>
                            <td>出库</td>
                            <td><input type="text" id="outbound-completion" placeholder="例如：当天剩余待出货：2300"></td>
                            <td><textarea id="outbound-completion-remark" placeholder="异常备注"></textarea></td>
                        </tr>
                        <tr>
                            <td>库存操作</td>
                            <td><input type="text" id="inventory-completion" placeholder="例如：待整理/调拨/盘点100件"></td>
                            <td><textarea id="inventory-completion-remark" placeholder="异常备注"></textarea></td>
                        </tr>
                        
                        <!-- 人员情况 -->
                        <tr>
                            <td rowspan="2">人员情况</td>
                            <td>出勤</td>
                            <td><input type="text" id="attendance" placeholder="例如：满勤8人，出勤7人"></td>
                            <td><textarea id="attendance-remark" placeholder="异常备注"></textarea></td>
                        </tr>
                        <tr>
                            <td>异常</td>
                            <td><input type="text" id="attendance-abnormal" placeholder="例如：一名压缩请假"></td>
                            <td><textarea id="attendance-abnormal-remark" placeholder="异常备注"></textarea></td>
                        </tr>
                        
                        <!-- 第二天的事项安排 -->
                        <tr>
                            <td>第二天的事项安排</td>
                            <td></td>
                            <td><textarea id="next-day-plan" placeholder="填写第二天的事项安排"></textarea></td>
                            <td><textarea id="next-day-remark" placeholder="异常备注"></textarea></td>
                        </tr>
                    </tbody>
                </table>
                
                <div class="actions">
                    <button id="save-btn" class="save-btn"><i>💾</i> 保存报告</button>
                    <button id="screenshot-btn" class="screenshot-btn"><i>📷</i> 完整截图</button>
                </div>
            </div>
        </div>
        
        <div class="history-section hidden" id="history-section">
            <div class="history-header">
                <h2>历史数据</h2>
                <button id="close-history-btn"><i>✕</i> 关闭</button>
            </div>
            <div class="history-table">
                <table id="history-table">
                    <thead>
                        <tr>
                            <th>日期</th>
                            <th>组别</th>
                            <th>入库数据</th>
                            <th>出库数据</th>
                            <th>库存操作</th>
                            <th>入库完成</th>
                            <th>出库完成</th>
                            <th>库存完成</th>
                            <th>出勤情况</th>
                            <th>异常情况</th>
                            <th>次日安排</th>
                        </tr>
                    </thead>
                    <tbody id="history-table-body">
                        <!-- 历史数据将在这里动态生成 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <!-- 截图预览模态框 -->
    <div class="screenshot-container" id="screenshot-container">
        <img class="screenshot-preview" id="screenshot-preview" alt="截图预览">
        <div class="screenshot-actions">
            <button id="screenshot-download" class="screenshot-download">下载截图</button>
            <button id="screenshot-close" class="screenshot-close">关闭预览</button>
        </div>
    </div>
    
    <div class="notification" id="notification">操作成功！</div>

    <script>
        // 初始化变量
        let currentGroup = 'btk';
        let currentDate = new Date().toISOString().split('T')[0];
        let allData = {};
        
        // DOM元素
        const datePicker = document.getElementById('date-picker');
        const todayBtn = document.getElementById('today-btn');
        const viewHistoryBtn = document.getElementById('view-history-btn');
        const closeHistoryBtn = document.getElementById('close-history-btn');
        const saveBtn = document.getElementById('save-btn');
        const screenshotBtn = document.getElementById('screenshot-btn');
        const exportExcelBtn = document.getElementById('export-excel-btn');
        const importExcelBtn = document.getElementById('import-excel-btn');
        const excelFileInput = document.getElementById('excel-file-input');
        const groupTabs = document.querySelectorAll('.group-tab');
        const historySection = document.getElementById('history-section');
        const historyTableBody = document.getElementById('history-table-body');
        const notification = document.getElementById('notification');
        const dataInfo = document.getElementById('data-info');
        const lastUpdate = document.getElementById('last-update');
        const screenshotContainer = document.getElementById('screenshot-container');
        const screenshotPreview = document.getElementById('screenshot-preview');
        const screenshotDownload = document.getElementById('screenshot-download');
        const screenshotClose = document.getElementById('screenshot-close');
        const mainContainer = document.getElementById('main-container');
        
        // 设置当前日期
        datePicker.value = currentDate;
        
        // 初始化数据
        loadAllData();
        updateDataInfo();
        
        // 事件监听
        todayBtn.addEventListener('click', () => {
            currentDate = new Date().toISOString().split('T')[0];
            datePicker.value = currentDate;
            loadReportData();
        });
        
        datePicker.addEventListener('change', (e) => {
            currentDate = e.target.value;
            loadReportData();
        });
        
        viewHistoryBtn.addEventListener('click', () => {
            historySection.classList.remove('hidden');
            loadHistoryData();
        });
        
        closeHistoryBtn.addEventListener('click', () => {
            historySection.classList.add('hidden');
        });
        
        saveBtn.addEventListener('click', saveReportData);
        screenshotBtn.addEventListener('click', takeScreenshot);
        exportExcelBtn.addEventListener('click', exportToExcel);
        importExcelBtn.addEventListener('click', () => excelFileInput.click());
        excelFileInput.addEventListener('change', importFromExcel);
        screenshotDownload.addEventListener('click', downloadScreenshot);
        screenshotClose.addEventListener('click', () => {
            screenshotContainer.style.display = 'none';
        });
        
        // 组别切换
        groupTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                groupTabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                currentGroup = tab.getAttribute('data-group');
                loadReportData();
            });
        });
        
        // 加载所有数据
        function loadAllData() {
            const savedData = localStorage.getItem('classReportData');
            if (savedData) {
                allData = JSON.parse(savedData);
            } else {
                allData = {};
            }
        }
        
        // 保存所有数据
        function saveAllData() {
            localStorage.setItem('classReportData', JSON.stringify(allData));
            updateDataInfo();
        }
        
        // 更新数据信息
        function updateDataInfo() {
            const count = Object.keys(allData).length;
            const now = new Date();
            lastUpdate.textContent = now.toLocaleString();
            dataInfo.innerHTML = `当前数据来源：本地存储 | 数据条目：${count} | 最后更新：<span id="last-update">${now.toLocaleString()}</span>`;
        }
        
        // 加载报告数据
        function loadReportData() {
            const key = `${currentDate}_${currentGroup}`;
            
            if (allData[key]) {
                const data = allData[key];
                document.getElementById('inbound-data').value = data.inboundData || '';
                document.getElementById('outbound-data').value = data.outboundData || '';
                document.getElementById('inventory-data').value = data.inventoryData || '';
                document.getElementById('inbound-completion').value = data.inboundCompletion || '';
                document.getElementById('outbound-completion').value = data.outboundCompletion || '';
                document.getElementById('inventory-completion').value = data.inventoryCompletion || '';
                document.getElementById('attendance').value = data.attendance || '';
                document.getElementById('attendance-abnormal').value = data.attendanceAbnormal || '';
                document.getElementById('next-day-plan').value = data.nextDayPlan || '';
                
                // 异常备注
                document.getElementById('inbound-remark').value = data.inboundRemark || '';
                document.getElementById('outbound-remark').value = data.outboundRemark || '';
                document.getElementById('inventory-remark').value = data.inventoryRemark || '';
                document.getElementById('inbound-completion-remark').value = data.inboundCompletionRemark || '';
                document.getElementById('outbound-completion-remark').value = data.outboundCompletionRemark || '';
                document.getElementById('inventory-completion-remark').value = data.inventoryCompletionRemark || '';
                document.getElementById('attendance-remark').value = data.attendanceRemark || '';
                document.getElementById('attendance-abnormal-remark').value = data.attendanceAbnormalRemark || '';
                document.getElementById('next-day-remark').value = data.nextDayRemark || '';
            } else {
                // 清空表单
                const inputs = document.querySelectorAll('input, textarea');
                inputs.forEach(input => {
                    if (input.id !== 'date-picker') {
                        input.value = '';
                    }
                });
            }
        }
        
        // 保存报告数据
        function saveReportData() {
            const data = {
                group: currentGroup,
                date: currentDate,
                inboundData: document.getElementById('inbound-data').value,
                outboundData: document.getElementById('outbound-data').value,
                inventoryData: document.getElementById('inventory-data').value,
                inboundCompletion: document.getElementById('inbound-completion').value,
                outboundCompletion: document.getElementById('outbound-completion').value,
                inventoryCompletion: document.getElementById('inventory-completion').value,
                attendance: document.getElementById('attendance').value,
                attendanceAbnormal: document.getElementById('attendance-abnormal').value,
                nextDayPlan: document.getElementById('next-day-plan').value,
                inboundRemark: document.getElementById('inbound-remark').value,
                outboundRemark: document.getElementById('outbound-remark').value,
                inventoryRemark: document.getElementById('inventory-remark').value,
                inboundCompletionRemark: document.getElementById('inbound-completion-remark').value,
                outboundCompletionRemark: document.getElementById('outbound-completion-remark').value,
                inventoryCompletionRemark: document.getElementById('inventory-completion-remark').value,
                attendanceRemark: document.getElementById('attendance-remark').value,
                attendanceAbnormalRemark: document.getElementById('attendance-abnormal-remark').value,
                nextDayRemark: document.getElementById('next-day-remark').value
            };
            
            const key = `${currentDate}_${currentGroup}`;
            allData[key] = data;
            saveAllData();
            
            showNotification('报告保存成功！');
        }
        
        // 加载历史数据
        function loadHistoryData() {
            // 清空历史表格
            historyTableBody.innerHTML = '';
            
            // 获取所有键并按日期排序（最新的在前面）
            const keys = Object.keys(allData);
            keys.sort((a, b) => {
                const dateA = a.split('_')[0];
                const dateB = b.split('_')[0];
                return dateB.localeCompare(dateA);
            });
            
            // 填充表格
            keys.forEach(key => {
                const data = allData[key];
                const [date, group] = key.split('_');
                
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${formatDate(date)}</td>
                    <td>${getGroupName(group)}</td>
                    <td>${data.inboundData || ''}</td>
                    <td>${data.outboundData || ''}</td>
                    <td>${data.inventoryData || ''}</td>
                    <td>${data.inboundCompletion || ''}</td>
                    <td>${data.outboundCompletion || ''}</td>
                    <td>${data.inventoryCompletion || ''}</td>
                    <td>${data.attendance || ''}</td>
                    <td>${data.attendanceAbnormal || ''}</td>
                    <td>${data.nextDayPlan || ''}</td>
                `;
                
                historyTableBody.appendChild(row);
            });
        }
        
        // 导出到Excel
        function exportToExcel() {
            try {
                // 准备数据
                const data = [];
                
                // 添加表头
                data.push([
                    '日期', '组别', '入库数据', '出库数据', '库存操作', 
                    '入库完成', '出库完成', '库存完成', '出勤情况', 
                    '异常情况', '次日安排', '入库异常备注', '出库异常备注',
                    '库存异常备注', '入库完成异常备注', '出库完成异常备注',
                    '库存完成异常备注', '出勤异常备注', '异常情况备注', '次日安排备注'
                ]);
                
                // 添加数据行
                Object.keys(allData).forEach(key => {
                    const record = allData[key];
                    const [date, group] = key.split('_');
                    
                    data.push([
                        formatDate(date),
                        getGroupName(group),
                        record.inboundData || '',
                        record.outboundData || '',
                        record.inventoryData || '',
                        record.inboundCompletion || '',
                        record.outboundCompletion || '',
                        record.inventoryCompletion || '',
                        record.attendance || '',
                        record.attendanceAbnormal || '',
                        record.nextDayPlan || '',
                        record.inboundRemark || '',
                        record.outboundRemark || '',
                        record.inventoryRemark || '',
                        record.inboundCompletionRemark || '',
                        record.outboundCompletionRemark || '',
                        record.inventoryCompletionRemark || '',
                        record.attendanceRemark || '',
                        record.attendanceAbnormalRemark || '',
                        record.nextDayRemark || ''
                    ]);
                });
                
                // 创建工作簿
                const ws = XLSX.utils.aoa_to_sheet(data);
                const wb = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(wb, ws, "结班报告数据");
                
                // 导出文件
                XLSX.writeFile(wb, `结班报告数据_${new Date().toISOString().split('T')[0]}.xlsx`);
                
                showNotification('Excel导出成功！');
            } catch (error) {
                console.error('导出Excel失败:', error);
                showNotification('导出Excel失败，请重试', true);
            }
        }
        
        // 从Excel导入
        function importFromExcel(event) {
            const file = event.target.files[0];
            if (!file) return;
            
            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    const data = new Uint8Array(e.target.result);
                    const workbook = XLSX.read(data, {type: 'array'});
                    
                    // 获取第一个工作表
                    const worksheet = workbook.Sheets[workbook.SheetNames[0]];
                    const jsonData = XLSX.utils.sheet_to_json(worksheet, {header: 1});
                    
                    // 移除表头
                    jsonData.shift();
                    
                    // 处理数据
                    jsonData.forEach(row => {
                        if (row.length >= 11) {
                            const date = row[0];
                            const group = getGroupKey(row[1]);
                            const key = `${date}_${group}`;
                            
                            allData[key] = {
                                group: group,
                                date: date,
                                inboundData: row[2] || '',
                                outboundData: row[3] || '',
                                inventoryData: row[4] || '',
                                inboundCompletion: row[5] || '',
                                outboundCompletion: row[6] || '',
                                inventoryCompletion: row[7] || '',
                                attendance: row[8] || '',
                                attendanceAbnormal: row[9] || '',
                                nextDayPlan: row[10] || '',
                                inboundRemark: row[11] || '',
                                outboundRemark: row[12] || '',
                                inventoryRemark: row[13] || '',
                                inboundCompletionRemark: row[14] || '',
                                outboundCompletionRemark: row[15] || '',
                                inventoryCompletionRemark: row[16] || '',
                                attendanceRemark: row[17] || '',
                                attendanceAbnormalRemark: row[18] || '',
                                nextDayRemark: row[19] || ''
                            };
                        }
                    });
                    
                    saveAllData();
                    loadReportData();
                    showNotification('Excel导入成功！');
                } catch (error) {
                    console.error('导入Excel失败:', error);
                    showNotification('导入Excel失败，请检查文件格式', true);
                }
            };
            reader.readAsArrayBuffer(file);
            
            // 清空文件输入
            event.target.value = '';
        }
        
        // 截图功能 - 完整截图整个页面（包含操作按钮）
        function takeScreenshot() {
            showNotification('正在生成完整截图，请稍候...');
            
            // 只隐藏不需要的元素，保留操作按钮
            const historySection = document.getElementById('history-section');
            const screenshotContainer = document.getElementById('screenshot-container');
            const notification = document.getElementById('notification');
            
            const originalHistoryDisplay = historySection.style.display;
            const originalScreenshotDisplay = screenshotContainer.style.display;
            const originalNotificationDisplay = notification.style.display;
            
            historySection.style.display = 'none';
            screenshotContainer.style.display = 'none';
            notification.style.display = 'none';
            
            // 截图整个主容器（现在包含操作按钮）
            html2canvas(mainContainer, {
                scale: 2, // 提高分辨率
                useCORS: true,
                allowTaint: true,
                scrollY: -window.scrollY,
                width: mainContainer.scrollWidth,
                height: mainContainer.scrollHeight,
                backgroundColor: '#ffffff'
            }).then(canvas => {
                // 恢复显示
                historySection.style.display = originalHistoryDisplay;
                screenshotContainer.style.display = originalScreenshotDisplay;
                notification.style.display = originalNotificationDisplay;
                
                // 显示预览
                screenshotPreview.src = canvas.toDataURL('image/png');
                screenshotContainer.style.display = 'flex';
                
                // 保存canvas供下载使用
                screenshotDownload.canvas = canvas;
                
                showNotification('完整截图生成成功！');
            }).catch(error => {
                // 恢复显示
                historySection.style.display = originalHistoryDisplay;
                screenshotContainer.style.display = originalScreenshotDisplay;
                notification.style.display = originalNotificationDisplay;
                
                console.error('截图失败:', error);
                showNotification('截图失败，请重试', true);
            });
        }
        
        // 下载截图
        function downloadScreenshot() {
            if (this.canvas) {
                const link = document.createElement('a');
                link.download = `结班报告_${getGroupName(currentGroup)}_${currentDate}_完整.png`;
                link.href = this.canvas.toDataURL('image/png');
                link.click();
                showNotification('截图下载成功！');
            }
        }
        
        // 显示通知
        function showNotification(message, isError = false) {
            notification.textContent = message;
            notification.className = 'notification';
            if (isError) {
                notification.classList.add('error');
            }
            notification.classList.add('show');
            
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }
        
        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
        }
        
        // 获取组别名称
        function getGroupName(groupKey) {
            const groupNames = {
                'btk': 'BTK',
                'small-shop': '小店铺',
                'pr-fashion': 'PR时装',
                'pr-sweater': 'PR毛衣'
            };
            
            return groupNames[groupKey] || groupKey;
        }
        
        // 获取组别键值
        function getGroupKey(groupName) {
            const groupKeys = {
                'BTK': 'btk',
                '小店铺': 'small-shop',
                'PR时装': 'pr-fashion',
                'PR毛衣': 'pr-sweater'
            };
            
            return groupKeys[groupName] || groupName;
        }
        
        // 初始化加载数据
        loadReportData();
    </script>
</body>
</html>